<template>
  <div class="find">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      class="header"
    >
      <template #action>
        <van-icon name="comment-o" size="25" />
      </template>
    </van-search>

    <div class="content">
      <img
        alt=""
        width="100%"
        style="padding-top: 50px;"
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d4298059889417157e8492750328492.jpg?w=632&h=340"
      />

      <!-- 小图标 -->
      <van-grid
        :column-num="4"
        icon-size="50px"
        :square="true"
        class="image-text"
        :border="false"
      >
        <van-grid-item
          :icon="item.img"
          :text="item.name"
          v-for="item in lists"
          :key="item._id"
          class="vg_item"
        />
      </van-grid>
      <h2 style="line-height:40px;margin-left:10px;font-weight:800">
        商城早报
      </h2>
      <div class="list">
        <img
          src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3aa70b7c8545d688bc02b4a494c37dab/4b90f603738da977c0484464a751f8198618e31f.jpg"
          alt=""
          width="100%"
        />
        <h3>小米感恩季福利加码 再送100元手机券</h3>
        <p>
          小米2021感恩季火热进行中，除了100万张100元现金券，又有新的福利来了!
        </p>
        <span class="left">7小时前</span>
        <span class="right">8541阅读</span>
      </div>
      <div class="list">
        <img
          src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=79445facea1f4134ff37037e151e95c1/c995d143ad4bd113acaa757d4dafa40f4bfb051e.jpg"
          alt=""
          width="100%"
        />
        <h3>小米感恩季福利加码 再送100元手机券</h3>
        <p>
          小米2021感恩季火热进行中，除了100万张100元现金券，又有新的福利来了!
        </p>
        <span class="left">10小时前</span>
        <span class="right">4851阅读</span>
      </div>
      <div class="list">
        <img
          src="https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=db4dfe5bbc18972bbc3a06cad6cc7b9d/267f9e2f07082838146b1e5baf99a9014c08f11f.jpg"
          alt=""
          width="100%"
        />
        <h3>小米感恩季福利加码 再送100元手机券</h3>
        <p>
          小米2021感恩季火热进行中，除了100万张100元现金券，又有新的福利来了!
        </p>
        <span class="left">1天前</span>
        <span class="right">6654阅读</span>
      </div>
      <div class="list">
        <img
          src="https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=9c1eb4d69526cffc762ab9b289004a7d/b3fb43166d224f4a0bffb15c1ef790529822d11f.jpg"
          alt=""
          width="100%"
        />
        <h3>小米感恩季福利加码 再送100元手机券</h3>
        <p>
          小米2021感恩季火热进行中，除了100万张100元现金券，又有新的福利来了!
        </p>
        <span class="left">1天前</span>
        <span class="right">1641阅读</span>
      </div>
      <div class="list">
        <img
          src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=24253dff72380cd7f91ea4ed9145ad14/ca1349540923dd54c2156527c609b3de9c82481f.jpg"
          alt=""
          width="100%"
        />
        <h3>小米感恩季福利加码 再送100元手机券</h3>
        <p>
          小米2021感恩季火热进行中，除了100万张100元现金券，又有新的福利来了!
        </p>
        <span class="left">2天前</span>
        <span class="right">1641阅读</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      value: "",
      lists: [
        {
          _id: 0,
          name: "上新精选",
          img:
            "https://img.youpin.mi-img.com/jianyu/3b9f8b4e5a1639cafbb3be08cba9963a.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 1,
          name: "小米众筹",
          img:
            "https://img.youpin.mi-img.com/jianyu/531253430ba83f5b88e4ae92cb5a197c.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 2,
          name: "小米秒杀",
          img:
            "https://img.youpin.mi-img.com/jianyu/7a255e71670b9ef4a90723223265b5c5.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
        {
          _id: 3,
          name: "小米自营",
          img:
            "https://img.youpin.mi-img.com/jianyu/52ec26cccb4d945aa4bacac4ec7c4622.png@base@tag=imgScale&h=100&m=1&q=80&w=100",
        },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
.find {
  margin-bottom: 70px;
}
.header {
  position: fixed;
  width: 100%;
}
.list h3 {
  margin-top: 8px;
  margin-left: 10px;
  font-size: 17px;
  line-height: 30px;
}
.list p {
  margin-left: 10px;
  margin-right: 10px;
  color: rgb(95, 95, 95);
  line-height: 24px;
}
.list .left {
  float: left;
  margin-left: 10px;
  line-height: 25px;
  color: rgb(95, 95, 95);
}
.list .right {
  float: right;
  margin-right: 10px;
  line-height: 25px;
  color: rgb(95, 95, 95);
}
</style>
